js：jquery multiSelect 多选下拉框实例 |
您所在的位置：网站首页 › jquery 多选三级联动 › js：jquery multiSelect 多选下拉框实例 |
|
三级联动多选下拉框
单选下拉框： 单选下拉框（带搜索功能）： (function() { // 默认只显示选择了的3个 var DEF_SHOW_SELELCTED_NUMBER = 3; $("#first_dist_single").multiselect({ multiple: false, header: "选择一项", selectedList: 1 }); $("#first_dist_single_filter").multiselect({ multiple: false, noneSelectedText: "请选择", selectedList: 1 }).multiselectfilter(); $("#first_dist").multiselect({ selectedList: DEF_SHOW_SELELCTED_NUMBER, noneSelectedText: '请选择省市', close: function(event, ui) { showNextDist($(this)); } } ); var showNextDist = function(obj) { var level = obj.data('level'), nextLevel = parseInt(level) + 1, nextDistNode = null, defaultText = ''; if (parseInt(nextLevel) === 2) { nextDistNode = $('#second_dist'); defaultText = '请选择市县'; } else if (parseInt(nextLevel) === 3) { nextDistNode = $('#third_dist'); defaultText = '请选择地级市'; } else if (parseInt(nextLevel) === 4) { nextDistNode = $('#fourth_dist'); defaultText = '请选择区镇'; } var selectedArr = obj.multiselect("getChecked").map(function() { return this.value; }).get(); var selectedVal = selectedArr.join(','); if (selectedVal !== '') { var url = '/m/buildfair/get_district'; $.post(url, {upid: selectedVal, level: nextLevel}, function(data) { if (data.success) { var srcData = data.data; if (nextDistNode !== null && srcData.length > 0) { nextDistNode.html(''); for (index in srcData) { var opt = srcData[index] nextDistNode.append('' + opt.name + ''); } nextDistNode.multiselect({ selectedList: DEF_SHOW_SELELCTED_NUMBER, noneSelectedText: defaultText, close: function(event, ui) { showNextDist(nextDistNode); } }).multiselect('refresh'); } } }, 'json'); } else { if (nextDistNode !== null) { nextDistNode.multiselect().multiselect("destroy").hide(); var nextDistLevel = nextDistNode.data('level'); if (parseInt(nextDistLevel) === 2) { $('#third_dist').multiselect().multiselect("destroy").hide(); $('#fourth_dist').multiselect().multiselect("destroy").hide(); } else if (parseInt(nextDistLevel) === 3) { $('#fourth_dist').multiselect().multiselect("destroy").hide(); } } } } })();注：记得要引入相关的js和css文件。如果不知道去哪找，这里有个链接，在里面可以找到： http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#basic
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |